---

---

<div>
    <slot/>
</div>

<style is:global lang="stylus">

/* utils */
white(a)
  rgba(255, 255, 255, a)

black(a)
  rgba(0, 0, 0, a)

isOklch(c)
  return substr(c, 0, 5) == 'oklch'

oklch_fallback(c)
  str = '' + c    // convert color value to string
  if isOklch(str)
    return convert(oklchToHex(str))
  return c

color_set(colors)
  @supports (color: oklch(0 0 0))
    :root
      for key, value in colors
        {key}: value[0]
    :root.dark
      for key, value in colors
        if length(value) > 1
          {key}: value[1]
  /* provide fallback color for oklch */
  @supports not (color: oklch(0 0 0))
    :root
      for key, value in colors
        {key}: oklch_fallback(value[0])
    :root.dark
      for key, value in colors
        if length(value) > 1
          {key}: oklch_fallback(value[1])

rainbow-light = linear-gradient(to right, oklch(0.80 0.10 0), oklch(0.80 0.10 30), oklch(0.80 0.10 60), oklch(0.80 0.10 90), oklch(0.80 0.10 120), oklch(0.80 0.10 150), oklch(0.80 0.10 180), oklch(0.80 0.10 210), oklch(0.80 0.10 240), oklch(0.80 0.10 270), oklch(0.80 0.10 300), oklch(0.80 0.10 330), oklch(0.80 0.10 360))
rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30), oklch(0.70 0.10 60), oklch(0.70 0.10 90), oklch(0.70 0.10 120), oklch(0.70 0.10 150), oklch(0.70 0.10 180), oklch(0.70 0.10 210), oklch(0.70 0.10 240), oklch(0.70 0.10 270), oklch(0.70 0.10 300), oklch(0.70 0.10 330), oklch(0.70 0.10 360))

:root
  --radius-large 1rem

  --banner-height-home 60vh
  --banner-height 40vh

  --content-delay 150ms

color_set({
  --primary: oklch(0.70 0.14 var(--hue)) oklch(0.75 0.14 var(--hue))
  --page-bg: oklch(0.95 0.01 var(--hue)) oklch(0.16 0.014 var(--hue))
  --card-bg: white oklch(0.23 0.015 var(--hue))

  --btn-content: oklch(0.55 0.12 var(--hue)) oklch(0.75 0.1 var(--hue))

  --btn-regular-bg: oklch(0.95 0.025 var(--hue)) oklch(0.33 0.035 var(--hue))
  --btn-regular-bg-hover: oklch(0.9 0.05 var(--hue)) oklch(0.38 0.04 var(--hue))
  --btn-regular-bg-active: oklch(0.85 0.08 var(--hue)) oklch(0.43 0.045 var(--hue))

  --btn-plain-bg-hover: oklch(0.95 0.025 var(--hue)) oklch(0.17 0.017 var(--hue))
  --btn-plain-bg-active: oklch(0.98 0.01 var(--hue)) oklch(0.19 0.017 var(--hue))

  --btn-card-bg-hover: oklch(0.98 0.005 var(--hue)) oklch(0.3 0.03 var(--hue))
  --btn-card-bg-active: oklch(0.9 0.03 var(--hue)) oklch(0.35 0.035 var(--hue))

  --enter-btn-bg: var(--btn-regular-bg)
  --enter-btn-bg-hover: var(--btn-regular-bg-hover)
  --enter-btn-bg-active: var(--btn-regular-bg-active)

  --deep-text: oklch(0.25 0.02 var(--hue))

  --title-active: oklch(0.6 0.1 var(--hue))

  --line-divider: black(0.08) white(0.08)

  --line-color: black(0.1) white(0.1)
  --meta-divider: black(0.2) white(0.2)

  --inline-code-bg: var(--btn-regular-bg)
  --inline-code-color: var(--btn-content)
  --selection-bg: oklch(0.90 0.05 var(--hue)) oklch(0.40 0.08 var(--hue))
  --codeblock-selection: oklch(0.40 0.08 var(--hue))
  --codeblock-bg: oklch(0.2 0.015 var(--hue)) oklch(0.17 0.015 var(--hue))

  --license-block-bg: black(0.03) var(--codeblock-bg)

  --link-underline: oklch(0.93 0.04 var(--hue)) oklch(0.40 0.08 var(--hue))
  --link-hover: oklch(0.95 0.025 var(--hue)) oklch(0.40 0.08 var(--hue))
  --link-active: oklch(0.90 0.05 var(--hue)) oklch(0.35 0.07 var(--hue))

  --float-panel-bg: white oklch(0.19 0.015 var(--hue))

  --scrollbar-bg-light: black(0.4)
  --scrollbar-bg-hover-light: black(0.5)
  --scrollbar-bg-active-light: black(0.6)

  --scrollbar-bg-dark: white(0.4)
  --scrollbar-bg-hover-dark: white(0.5)
  --scrollbar-bg-active-dark: white(0.6)

  --scrollbar-bg: var(--scrollbar-bg-light) var(--scrollbar-bg-dark)
  --scrollbar-bg-hover: var(--scrollbar-bg-hover-light) var(--scrollbar-bg-hover-dark)
  --scrollbar-bg-active: var(--scrollbar-bg-active-light) var(--scrollbar-bg-active-dark)

  --color-selection-bar: rainbow-light rainbow-dark

  --display-light-icon: 1 0
  --display-dark-icon: 0 1
})


/* some global styles */
::selection
  background-color: var(--selection-bg)

.scrollbar-base.os-scrollbar
  transition: width 0.15s ease-in-out, height 0.15s ease-in-out, opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;
  pointer-events: unset;
  &.os-scrollbar-horizontal
    padding-top: 4px;
    padding-bottom: 4px;
    height: 16px;
    .os-scrollbar-track .os-scrollbar-handle
      height: 4px;
      border-radius: 4px;
    &:hover
      .os-scrollbar-track .os-scrollbar-handle
        height: 8px;
    &.px-2
      padding-left: 8px;
      padding-right: 8px;
  &.os-scrollbar-vertical
    padding-left: 4px;
    padding-right: 4px;
    width: 16px;
    .os-scrollbar-track .os-scrollbar-handle
      width: 4px;
      border-radius: 4px;
    &:hover
      .os-scrollbar-track .os-scrollbar-handle
        width: 8px;
    &.py-1
      padding-top: 4px;
      padding-bottom: 4px;

.scrollbar-auto
  &.os-scrollbar
    --os-handle-bg: var(--scrollbar-bg);
    --os-handle-bg-hover: var(--scrollbar-bg-hover);
    --os-handle-bg-active: var(--scrollbar-bg-active);

.scrollbar-dark
  &.os-scrollbar
    --os-handle-bg: var(--scrollbar-bg-dark);
    --os-handle-bg-hover: var(--scrollbar-bg-hover-dark);
    --os-handle-bg-active: var(--scrollbar-bg-active-dark);

.scrollbar-light
  &.os-scrollbar
    --os-handle-bg: var(--scrollbar-bg-light);
    --os-handle-bg-hover: var(--scrollbar-bg-hover-light);
    --os-handle-bg-active: var(--scrollbar-bg-active-light);


</style>
<style is:global>
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .card-base {
        @apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition;
    }
    h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
        @apply transition;
    }
    .card-shadow {
        @apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)]
    }
    .link {
        @apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-1 -m-1;
    }
    .link-lg {
        @apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-1.5 -m-1.5;
    }
    .float-panel {
        @apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
    }
    .float-panel-closed {
        @apply -translate-y-1 opacity-0 pointer-events-none
    }
    .search-panel mark {
        @apply bg-transparent text-[var(--primary)]
    }

    .btn-card {
        @apply transition flex items-center justify-center bg-[var(--card-bg)] hover:bg-[var(--btn-card-bg-hover)]
        active:bg-[var(--btn-card-bg-active)]
    }
    .btn-card.disabled {
        @apply pointer-events-none text-black/10 dark:text-white/10
    }
    .btn-plain {
        @apply transition flex items-center justify-center bg-none hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)]
        text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)]
    }
    .btn-regular {
        @apply transition flex items-center justify-center bg-[var(--btn-regular-bg)] hover:bg-[var(--btn-regular-bg-hover)] active:bg-[var(--btn-regular-bg-active)]
        text-[var(--btn-content)] dark:text-white/75
    }

    .link-underline {
        @apply transition underline decoration-2 decoration-dashed decoration-[var(--link-underline)]
        hover:decoration-[var(--link-hover)] active:decoration-[var(--link-active)] underline-offset-[0.25rem]
    }

    .text-90 {
        @apply text-black/90 dark:text-white/90
    }
    .text-75 {
        @apply text-black/75 dark:text-white/75
    }
    .text-50 {
        @apply text-black/50 dark:text-white/50
    }
    .text-30 {
        @apply text-black/30 dark:text-white/30
    }
    .text-25 {
        @apply text-black/25 dark:text-white/25
    }

    html.is-changing .transition-fade {
        @apply transition-all duration-200
    }
    html.is-animating .transition-fade {
        @apply opacity-0 translate-y-4
    }
}

@keyframes fade-in-up {
    0% {
        transform: translateY(2rem);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.onload-animation {
    opacity: 0;
    animation: 300ms fade-in-up;
    animation-fill-mode: forwards;
}
#top-row {
    animation-delay: 0ms
}
#sidebar {
    animation-delay: 100ms
}
#content-wrapper {
    animation-delay: var(--content-delay);
}
#footer {
    animation-delay: 400ms;
}


</style>